<template>
    <div class="income">
        <dl>
            <dt class="f28" @click="selectTime(true, false)">{{shijian}}<i class="icon iconfont icon-xiajiantou"></i>
                <span>{{billList[1]}}</span>
            </dt>
            <dd v-for="(v, k) in billObj" :key="k" v-if="!zanwu & k != 'total'">
                <div class="income_time f32">{{k}}日</div>
                <!-- {{billList[k]}} -->
                <div class="referral_list" v-for="(item, ind) in v" :key="ind" @click="tixian(item.moneyId)">
                    <div class="referral">
                        <span class="referral_tit f26">{{item.moneyRemark}}</span>
                        <span class="referral_price f26">{{item.money}}</span>
                    </div>
                    <div class="clear"></div>
                    <div class="time">
                        <span>{{item.createTime}}</span>
                        <span :class="item.isDraw == 0 ? 'green' : 'red'">{{item.isDraw == 0 ? '未提现' : '已提现'}}</span>
                    </div>
                </div>
            </dd>
        </dl>
        <blank :title="'暂无账单记录'" v-if="zanwu"/>
        <div class="mark" v-if="isMark">
            <div class="mark_time">
                <div class="btn">
                    <span @click="selectTime(false, false)">取消</span>
                    <span @click="selectTime(false, true)">确定</span>
                </div>
                <!-- <datetime-range :value="timeArr" :title="''" format="YYYY-MM" ></datetime-range> -->
                <datetime-view v-model="value" format="YYYY-MM" :title="''" :start-date='timeArr[5]' :end-date="timeArr[0]"></datetime-view>
            </div>
        </div>
    </div>
</template>

<script>
    import { DatetimeView, Group } from 'vux'
    import blank from '@/components/masterInfo/blank'
    export default {
        name: 'income',
        components: {
            DatetimeView,
            Group, 
            blank
        },
        data() {
            return {
                billObj:{},
                billList: [],
                time: new Date(),
                nian: new Date().getFullYear(),
                yue: new Date().getMonth() + 1,
                value: (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1),
                isMark: false,
                shijian: (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1),
                targetid: '',
                zanwu: false,
                timeArr: [],
                a: ''
            }
        },
        methods: {
            tixian(id) {
                this.$router.push({
                    path: '/showDetails',
                    query: {
                        moneyId: id,
                        type: 1, // 1账单详情   2提现明细详情
                    }
                })
            },
            getMoneyLogList() {
                let params = {
                    targetId: this.targetid,
                    type: this.$route.query.type,
                    year: this.value.split('-')[0],
                    month: this.value.split('-')[1],
                }
                this.$http.fetchGet('getMoneyLogList', params).then(res => {
                    if(res.code == 200) {
                        this.billObj = res.data
                        this.shijian = this.value
                        if(res.data['total'] == 0) {
                            this.zanwu = true
                        } else {
                            this.zanwu = false
                        }
                    }
                }, err => {
                    console.log(err)
                })
            },
            // isOperator() {
            //     let params = {
            //         userId: this.$store.state.userId
            //     }
            //     this.$http.fetchGet('isOperator', params).then(res => {
            //         if(res.code == 200) {
            //             let tarId = ''
            //             if(res.data.operator_id) {
            //                 tarId = res.data.operator_id
            //             } else {
            //                 tarId = res.data.userId
            //             }
            //             this.getMoneyLogList()
            //         } else {
            //             this.$vux.toast.text(res.msg)
            //         }
            //     }, err => {
            //         console.log(err)
            //     })
            // },
            change() {
                console.log(this.value)
            },
            selectTime(bool1, bool2) {
                this.isMark = bool1
                if(bool2) {
                    this.getMoneyLogList()
                }
            },
            getTimes() {
                let timeArr = [1, 2 ,3 ,4 ,5 ,6 ,7 ,8 ,9 ,10 ,11 ,12]
                let nowTime = new Date().getTime()
                let yueTime = 60 * 60 * 24 * 31 * 1000;
                let arr = []
                for(let i=0;i<6;i++){
                    let time = new Date(nowTime - yueTime * i).getTime()
                    let yue = new Date(time).getMonth() + 1 < 10 ? '0' + (new Date(time).getMonth() + 1) : new Date(time).getMonth() + 1
                    let ri = new Date(time).getDate() < 10 ? '0' + new Date(time).getDate() : new Date(time).getDate()
                    this.timeArr.push(new Date(time).getFullYear() + '-' + yue + '-' + ri)
                }
                console.log(this.timeArr)
            },
        },
        created() {
            this.getTimes()
            if(this.$route.query.type) {
                if(this.$route.query.type == 1) {
                    this.targetid = this.$store.state.masterId
                } else if(this.$route.query.type == 2) {
                    this.targetid = this.$store.state.userId
                }
                this.getMoneyLogList()
            } else {
                this.targetid = this.$store.state.userId
                this.getMoneyLogList()
            }
        },
        mounted() {
            
        }
    }
</script>

<style lang="less" scoped>
    .income{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        dl{
            dt{
                .lh(88);
                .padd(0, 20);
                border-bottom: 1px solid #f2f2f2;
                background: #f2f2f2;
                span{
                    width: 0px;
                    height: 0px;
                    display: block;
                    overflow: hidden;
                }
            }
            dd{
                .padd(10, 20);
                .referral{
                    .lh(80);
                    .referral_tit{
                        width: 65%;
                        float: left;
                        overflow: hidden;
                        text-overflow:ellipsis; // 文本溢出显示省略号
                        white-space:nowrap; // 文本不会换行（单行文本溢出）
                    }
                    .referral_price{
                        float: right;
                    }
                }
                .referral_list{
                    border-bottom: 1px solid #f2f2f2;
                    .pb(10);
                }
                .clear{
                    clear: both;
                }
                .time{
                    color: #999;
                    display: flex;
                    justify-content:space-between;
                    .lh(40);
                    .red{
                        color: red;
                    }
                    .green{
                        color: green;
                    }
                }
                .income_time{
                    font-weight: 700;
                    color:#ccc;
                }
            }
        }
        .mark{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);
            .mark_time{
                position: absolute;
                bottom: 0;
                width: 100%;
                .btn{
                    width: 100%;
                    display: flex;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        background: #fff;
                        border-bottom: 1px solid #f2f2f2;
                        box-sizing: border-box;
                        &:nth-child(1){
                            border-right: 1px solid #f2f2f2;
                        }
                        &:nth-child(2) {
                            color: #189BEB;
                        }
                    }
                }
            }
        }
    }
</style>
